<template>
  <div class="tgLogin">
    <!-- 投管登录 -->

    <div class="tgLogin-wrapper" :style="{width:needMenberShow?'1300px':'380px'}">
      <div class="tgLogin-wrapper-header">
        <div class="left-logo"></div>
        <div class="logo-text">{{systemInfo.loginPageName}}</div>
        <div class="inline-text">欢迎登陆</div>
      </div>
      <!-- <component :is="cComponent" @click="handClickFun" ref="loginComponent"></component> -->
      <loginForm
        v-if="!needMenberShow"
        @loginIn="loginIn"
        @handleReset="handleReset"
        :loginForm="loginForm"
      ></loginForm>
      <choseMenber v-else ref="choseMenber" @click="handClickFun"></choseMenber>
    </div>
  </div>
</template>

<script>

import loginForm from "./components/loginForm";
import choseMenber from "./components/tgMenber";
import { postDefaultSystem } from "@/api/desktop/index.js";
import { mapGetters } from "vuex";
import login from "../mixins/login";
export default {
  name: "tgLogin",
  mixins: [login],
  components: {
    loginForm,
    choseMenber
  },
  computed: {
    ...mapGetters(["needMenberShow", "currentUser", "systemCode", "systemInfo"])
    // cComponent () {
    //   return this.needMenberShow ? choseMenber : loginForm;
    // }
  },
  methods: {
    handClickFun (item) {
      console.log(item);
      let params = {
        name: item.name,
        value: item.menuId
      };
      // let code = this.systemCode === 1 ? "portal" : "chiefportal";
      postDefaultSystem(params, this.token).then(res => {
        if (res.data.code === 0) {
          this.goToHome(this.currentUser, item.menuId);
        }
      });

    }
  }
};
</script>

<style lang="less" scoped>

.tgLogin{
  width: 100%;
  height: 100%;
  background:url("./images/login-bg.jpg") no-repeat 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .tgLogin-wrapper{
    // width: 580px;
    // padding-top: 150px;
    .tgLogin-wrapper-header{
      width: 380px;
      height: 50px;
      position: relative;
      background:url("./images/logo-bg.png") no-repeat;
      background-position: 0 20px;
      margin:0 auto;
      margin-bottom: 20px;
      .left-logo{
        width: 46px;
        height: 36px;
        background:url("./images/logo.png") no-repeat;
        float: left;
      }
      .logo-text{
        float: left;
        font-size: 30px;
        color:#2a4177;
        position: relative;
        top: 3px;
        left: 3px;
      }
      .inline-text{
        position: absolute;
        right:0;
        bottom: 0px;
        font-size: 14px;
        color: #2a4177;
      }
    }
  }
  .bottomText{
    margin-top:20px;
    font-size: 16px;
    text-align: center;
    color:#333;
    >p{
      margin-bottom: 10px;
    }
  }
}
</style>

